<template>
    <div>
       
        <div id="firstMap" ref="firstMap" style="width: 500px; height:330px;margin:0 auto"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { reqCommodityData} from '@/api/home/index.js'
import { decrypt } from '@/utils/AES.js'
export default {
        props:{
            // firstMapList:{
            //     type:Array
            // },
           
            changeSelected:{
                type:String
            }
        },
        data(){
            return {
                firstMapList:[],
                
            }
        },
        created(){
            this.getList()
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart();
            });
        },
        watch:{
            firstMapList:{
                deep:true,
                handler(val){
                   
                    this.setOptions(val);
                }
            },
            $route: {
                handler(val) {
                    if (val.query.reportCode == "SecondView") {
                        this.getList()
                       
                    } else {
                        return
                    }

                },
                deep: true
            }
          
        },
        methods:{
            async getList() {
                let query = JSON.parse(decrypt(this.$route.query.key))
                const res = await reqCommodityData({ consignCode: query.tradeCo })

                // console.log(res);
                this.firstMapList = res.data
                this.chart.hideLoading();
               
            },
            initChart() {
                this.chart = echarts.init(document.getElementById('firstMap'), null, { renderer: 'svg' });
                this.chart.showLoading({
                    text: '',
                    color: '#c23531',
                    textColor: '#000',
                    maskColor: 'rgba(255, 255, 255, 0)',
                })
                // this.setOptions(this.firstMapList);
            },

            
            setOptions(newArr){
                // this.chart.clear()
                // 遍历得出月份
                
                let monthList = newArr.map(item => {
                    return item.month
                })
                let bottomArr = Array.from(new Set(monthList))

                // 进口
                let arr=newArr.filter(item=>{
                    return item.ieFlag=='I'
                })
                let iDW=arr[0].numberName?arr[0].numberName.slice(-1):arr[1].numberName.slice(-1)
                let jinkouList =arr.map(item=>{
                    return item.numberName.slice(0,-1)==''?0:+item.numberName.slice(0,-1)
                })
                // 出口
                let arr2=newArr.filter(item=>{
                    return item.ieFlag=='E'
                })
                let eDW=arr2[0].numberName?arr2[0].numberName.slice(-1):arr2[1].numberName.slice(-1)
               let chukouList= arr2.map(item=>{
                   return item.numberName.slice(0,-1)==''?0:item.numberName.slice(0,-1)
                })
                // console.log(chukouList);
                this.chart.setOption({
                    graphic: {
                        type: 'text',     // 类型：文本
                        left: 'center',
                        top: 'middle',
                        silent: true,     // 不响应事件
                        invisible: bottomArr.length > 0 || jinkouList.length > 0 || chukouList.length>0,   // 有数据就隐藏
                        style: {
                            fill: '#9d9d9d',
                            fontWeight: 'bold',
                            text: '查无数据',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: 25
                        }
                    },
                    color: [
                        "#ff9345",
                        "#00e2ff",

                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: "shadow",
                        },
                        formatter:function(params){
                       let str=params[0].axisValue+'<br />'
                       params.forEach(item=>{
                        if(item.seriesName=='进口'){
                            str+=`${item.seriesName}: ${item.data}${iDW}<br />`
                        }else {
                            str+=`${item.seriesName}: ${item.data}${eDW}<br />`
                        }
                       })
                        return str
                    }
                    },
                    legend: {
                        show: newArr.length > 0,
                        data: ['进口', '出口'],
                        top: 10,
                        textStyle: {
                            color: '#fff',

                        },
                    },

                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: bottomArr,
                            
                            axisLine: { 
                                show: newArr.length > 0, //这是x轴文字颜色
                                lineStyle: {
                                    color: "#fff"
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                            

                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: newArr.length > 0?'单位：'+iDW+'(进口)':'',
                            nameLocation:'end',
                            nameTextStyle: {
                                color: "#fff",
                                fontWeight:'lighter'
                            },
                            axisLine: {//这是y轴文字颜色
                                show: false,
                                lineStyle: {
                                    color: "#fff",

                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: ["rgba(209,209,209,.25)"],
                                },
                            },

                            axisTick: {
                                show: false,
                            },
                        },
                        {
                            type: 'value',
                            name: newArr.length > 0?'单位：'+eDW+'(出口)':'',
                            nameLocation:'end',
                            nameTextStyle: {
                                color: "#fff",
                                fontWeight:'lighter'
                            },
                            axisLine: {//这是y轴文字颜色
                                show: false,
                                lineStyle: {
                                    color: "#fff",

                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: ["rgba(209,209,209,.25)"],
                                },
                            },

                            axisTick: {
                                show: false,
                            },
                        }
                    ],
                    series: [
                        {
                            name: '进口',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            smooth: true,  //这个是把线变成曲线
                            emphasis: {
                                focus: 'series'
                            },
                            data: jinkouList
                        },
                        {
                            name: '出口',
                            type: 'line',
                            yAxisIndex:1,
                            stack: 'Total',
                            smooth: true,  //这个是把线变成曲线
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: chukouList
                        },

                    ]
                })
            },
        },
    }

</script>

<style>

</style>